<%@ page language="java" contentType="text/html; charset=UTF-8"
	import="java.util.*"%>
<!DOCTYPE html>
<html>
<head>
<title>搜索框</title>
<!-- 引入Jq文件 -->
<script type="text/javascript" src="js/jq.js"></script>
<!-- 声明Js代码域 -->
<script type="text/javascript">

    //创建计数器
    var count = -1;
    //声明延时发送编号变量
    var id;
	//页面加载完成页面资源初始化
	$(function(){
		//给搜索框添加键盘弹起事件
		$("#search").keyup(function(event){//火狐方式获取event对象
			//声明正则表达是判断空格
			var reg =/^\s+$/g;
			//获取event对象
			var eve = window.event||event;
			//获取用户当前点击的键盘值
			var code = eve.keyCode;
			//判断code的值是否符合要求
			if(code>=65&code<=90||code>=48&code<=57||code>=96&code<=105||code==8||code==32){
				//获取用户当前搜索框中的数据
				var sd = $("#search").val();
				if(sd==""||reg.test(sd)){
					//隐藏div
					$("#dataDiv").css("display","none");
					return;
				}
				//清除之前要发出的请求
				window.clearTimeout(id);
				//延时发送请求,0.5秒
				id = window.setTimeout(function(){
					//发起ajax请求
					$.get("SearchServlet",{sdata:sd},function(data){
						//将获得的值用eval转化成js格式
						eval("var sc ="+data);
						//获取div对象
						var dt = $("#dataDiv")
						//清空原有内容
						dt.empty();
						if(sc.length>0){
							//显示隐藏的div
							dt.css("display","");
						}
						//将提示语填充到div中
						for(var i = 0;i<sc.length;i++){
							dt.append("<div style='padding:5px'>"+sc[i].title+"</div>");
						}
						//给提示语添加鼠标选择效果
						$("#dataDiv div").mouseover(function(){
							//清空所有提示语的div背景颜色
							$("#dataDiv div").css("background-color","");
							//将当前选择的div背景颜色变成灰色
							$(this).css("background-color","gray");
							//将计数器的值变为当前选择的值
							count = $(this).index();
						})
						//给提示语div添加单击事件，用例选择提示语
						$("#dataDiv div").click(function(){
							//将当前选择的div中提示语数据改变到搜索框中
							$("#search").val($(this).html());
							//隐藏当前填充所有提示语的div
							$("#dataDiv").css("display","none");
						})
					})
				},500)
			}
			//判断用户点击的是否是键盘下键
			if(code==40){
				//判断是否有提示语
				if($("#dataDiv div").length>0){
					//判断计数器的值是否大于div长度
					count = count<$("#dataDiv div").length-1?++count:0;
					//清空所有提示语的div的背景颜色
					$("#dataDiv div").css("background-color","");
					//让选中的提示语div背景变灰色
					$("#dataDiv div:eq("+count+")").css("background-color","gray");
					//将当前选择的div中提示语数据改变到搜索框中
					$("#search").val($("#dataDiv div:eq("+count+")").html());
				}
			}
			//判断用户点击的是否是键盘上键
			if(code==38){
				//判断是否有提示语
				if($("#dataDiv div").length>0){
					//判断计数器的值是否大于div长度
					count = count>0?--count:$("#dataDiv div").length-1;
					//清空所有提示语的div的背景颜色
					$("#dataDiv div").css("background-color","");
					//让选中的提示语div背景变灰色
					$("#dataDiv div:eq("+count+")").css("background-color","gray");
					//将当前选择的div中提示语数据改变到搜索框中
					$("#search").val($("#dataDiv div:eq("+count+")").html());
				}
			}
		})
	})
</script>
</head>
<body>
	<!-- 创建div容器将提示语div和搜索框div显示到一起 -->
	<div id="container" style="width: 500px; margin: auto;">
		<!-- 搜索框div -->
		<div id="sdiv" style="width: 550px; margin: auto; margin-top: 200px">
			<input type="text" name="search" id="search" value="" style="width: 400px; height: 30px; font-size: 20px" />
			<input type="button" value="搜索" style="height: 30px; width: 100px;" />
		</div>
		<!-- 提示语div -->
		<div id="dataDiv" style="width: 402px; height: 300px; border: solid 1px; border-color: gray ;display:none;"></div>
	</div>
</body>
</html>